<template>
	<view>
		<view class="contentView flex-row-space-between">
			<view class="dsr" style="margin-left: 1rpx;">
				补充委托合同
			</view>
			<image @click="isShowClick" style="width: 28rpx;height: 28rpx;margin-top: 40rpx;" src="/static/my/mine_blackdownarrow.png"></image>
		</view>
		<view v-if="isShow">
			<view class="contentView flex-row-space-between" style="margin-top: 10rpx;">
				<view class="name2">
					合同期限
				</view>
				<view class="flex-row-flex-end">
					<input @input="textInput" :disabled="isEdit" v-model="infoDic.entrustagelimit" class="inputView2" placeholder="请输入"/>
					<view class="name2">
						(年)
					</view>
				</view>
			</view>
			<view class="contentView flex-row-space-between" style="margin-top: 10rpx;">
				<view class="name2">
				</view>
				<view class="flex-row-flex-end">
					<picker :disabled="isEdit" mode="date" :value="date" :start="startDate" @change="bindDateChange">
						<input @input="textInput" disabled="true" v-model="infoDic.entrustagelimitbegin" class="inputView2222AAA" placeholder="请选择"/>
					</picker>
					<view class="name2" style="margin-left: 20rpx;">
						至
					</view>
					<picker :disabled="isEdit" mode="date" :value="date2" :start="startDate" @change="bindDateChange2">
						<input @input="textInput" disabled="true" v-model="infoDic.entrustagelimitend" class="inputView2222AAA" placeholder="请选择"/>
					</picker>
					<view class="name2" style="margin-left: 20rpx;">
						止
					</view>
				</view>
			</view>
			<view class="contentView flex-row-space-between" style="margin-top: 10rpx;">
				<view class="name3333">
					法律顾问费<text style="font-family: DIN, DIN;font-weight: 500;font-size: 36rpx;color: #FF4C4C;margin-left: 30rpx;">￥:</text>
				</view>
				<input @input="textInput" :disabled="isEdit" v-model="infoDic.contractonsultantfees" class="inputView4" placeholder="请输入"/>
			</view>
			<view class="contentView flex-row-space-between" style="margin-top: 20rpx;">
				<view class="name222">
					额外收款按总代理费
				</view>
				<input @input="textInput" :disabled="isEdit" v-model="infoDic.contractagencyfee" class="inputView" placeholder="请输入"/>
				%
			</view>
			<view class="contentView flex-row-space-between" style="margin-top: 20rpx;">
				<view class="name">
					律师费附加约定
				</view>
				<input @input="textInput" :disabled="isEdit" v-model="infoDic.contractbookingfee" class="inputView" placeholder="请输入"/>
			</view>
			<view class="contentView flex-row-space-between" style="margin-top: 10rpx;">
				<view class="name44444 flex-row-flex-start">
					差旅费<view style="width: 70rpx;"></view>A：包干<text style="font-family: DIN, DIN;font-weight: 500;font-size: 36rpx;color: #FF4C4C;margin-left: 30rpx;">￥:</text>
				</view>
				<input @input="textInput" :disabled="isEdit" v-model="infoDic.contractlumpsumfee" class="inputView555555" placeholder="请输入"/>
			</view>
			<view class="contentView flex-row-space-between" style="margin-top: 10rpx;">
				<view class="name55555 flex-row-flex-start">
					<view style="width: 130rpx;"></view>B：预收<text style="font-family: DIN, DIN;font-weight: 500;font-size: 36rpx;color: #FF4C4C;margin-left: 30rpx;">￥:</text>
				</view>
				<input @input="textInput" :disabled="isEdit" v-model="infoDic.contractprereceived" class="inputView555555" placeholder="请输入"/>(多退少补)
			</view>
			<view class="contentView flex-row-space-between" style="margin-top: 10rpx;">
				<view class="name3333">
					额外会见费<text style="font-family: DIN, DIN;font-weight: 500;font-size: 36rpx;color: #FF4C4C;margin-left: 30rpx;">￥:</text>
				</view>
				<input @input="textInput" :disabled="isEdit" v-model="infoDic.contractmeetingfees" class="inputView44444" placeholder="请输入"/>/次
			</view>
			<view class="contentView flex-row-space-between" style="margin-top: 20rpx;">
				<view class="name">
					合同有效期至本案
				</view>
				<picker :disabled="isEdit" mode="date" :value="date3" :start="startDate" @change="bindDateChange3">
					<input @input="textInput" disabled="true" v-model="infoDic.contracttime" class="inputView2222" placeholder="请选择"/>
				</picker>
				
				终结为止
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"buChongHeTong",
		props: {
			//当前组件内容信息
			infoDic: {
				type: Object,
				default: function() {
					return {
						entrustagelimit: '',
						entrustagelimitbegin: '',
						entrustagelimitend:'',
						contractonsultantfees:'',
						contractagencyfee: '',
						contractbookingfee:'',
						contractlumpsumfee:'',
						contractprereceived: '',
						contractmeetingfees:'',
						contracttime:''
					};
				}
			},
			//当前组件是否可编辑
			isEdit: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			const currentDate = this.getDate({format: true})
			return {
				isShow:false,
				date: currentDate,
				date2: currentDate,
				date3: currentDate,
				startDate:currentDate,
			};
		},
		methods:{
			isShowClick(){
				this.isShow = !this.isShow
			},
			textInput(){
				console.log('this.infoDic----',this.infoDic)
				this.$emit('buChongHeTongInfoCallBack', this.infoDic)
			},
			bindDateChange(e){
				console.log('e-----------',e)
				this.date = e.detail.value
				this.infoDic.entrustagelimitbegin = e.detail.value
				this.textInput()
			},
			bindDateChange2(e){
				console.log('e-----------',e)
				this.date2 = e.detail.value
				this.infoDic.entrustagelimitend = e.detail.value
				this.textInput()
			},
			bindDateChange3(e){
				console.log('e-----------',e)
				this.date3 = e.detail.value
				this.infoDic.contracttime = e.detail.value
				this.textInput()
			},
			 getDate(type) {
				const date = new Date();
			    let year = date.getFullYear();
			    let month = date.getMonth() + 1;
			    let day = date.getDate();
						
			    if (type === 'start') {
			        year = year - 60;
			    } else if (type === 'end') {
			        year = year + 2;
			    }
			    month = month > 9 ? month : '0' + month;
			    day = day > 9 ? day : '0' + day;
			    return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style>
	.inputView555555{
		width: 150rpx;
		margin-left: 12rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
		text-align: right;
	}
	.inputView2222{
		width: 240rpx;
		margin-left: 12rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
		text-align: right;
	}
	.inputView2222AAA{
		width: 210rpx;
		margin-left: 12rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
		text-align: right;
	}
	.inputView44444{
		width: 140rpx;
		margin-left: 88rpx;
		font-family: DIN, DIN;
		font-weight: 500;
		font-size: 36rpx;
		color: #FF4C4C;
		text-align: left;
	}
	.inputView4{
		width: 456rpx;
		margin-left: 88rpx;
		font-family: DIN, DIN;
		font-weight: 500;
		font-size: 36rpx;
		color: #FF4C4C;
		text-align: left;
	}
	.inputView2{
		width: 130rpx;
		margin-left: 88rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
		text-align: left;
	}
	.inputView{
		width: 340rpx;
		margin-left: 12rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
		text-align: right;
	}
	.name55555{
		width: 320rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
	}
	.name44444{
		width: 400rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
	}
	.name3333{
		width: 280rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
	}
	.name222{
		width: 280rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
	}
	.name2{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
	}
	.name{
		width: 250rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
	}
	.contentView{
		padding-left: 24rpx;
		padding-right: 24rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}
	.dsr{
		margin-left: 24rpx;
		margin-top: 40rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
	}
</style>